﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
     .wrapper{width: 300px; height: 400px; overflow-x: scroll;border: 1px solid #ccc;margin: 0 auto;}
        .fold{ display:none;}
        .aiui .checkbox{ width: 15px; height: 15px; border: 1px solid #dadada; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin:2px 5px 0 0;cursor: pointer; }
        .aiui .c-selected{ border: 1px solid #27b0f2; position: relative;}
        .aiui .c-selected:after{ content:''; display:block; width:100%; height:100%; position: absolute; left: 0; top: 0; background:#27b0f2 url("ai_icon.png") no-repeat -36px -1px; }
        .aiui .c-selected:after{ background-position: -1px -1px;}
        .aiui .checkbox > input{ margin: 0; visibility: hidden;}
        .pull-left{ float: left;}
        .c-f:after{content:".";display:block;height:0;clear:both;visibility:hidden}
         ul,li,i{ list-style:none; padding:0; margin:0; font-style:normal;}
        .ai-treenav{ width:100%;}
        .ai-treenav ul{ margin-left:20px;}
        .ai-treenav i{width:14px; height:14px; background:url("ai_icon.png") no-repeat -4px -33px; margin:2px 7px 0 0; float: left}
        .ai-treenav i.unfold, .ai-treenav .item-name-last > i{width:14px; height:14px;  background:url("ai_icon.png") no-repeat -24px -33px;}
        .ai-treenav a{display:block; font-size:14px; height:22px; padding:3px 0; color:#666; overflow:hidden;}
        .nav-trunk{ margin-left:20px;}
        .ai-treenav .checkbox{ margin-top: 0;}
        .ai-treenav .filename,.ai-treenav .filename-open{background: url("ai_icon.png") no-repeat 0 -72px; padding-left: 25px; width: 50%;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
        .ai-treenav .filename-open{ background-position: 0 -52px;}
        .ai-treenav li.unfold{min-width: 250px;}
        .ai-treenav li.unfold > ul li .filename{ width: 60%;}
</style>
<script src="~/ace/assets/js/jquery.js"></script>
<script>
    $(function () {
        $(".item-name > i").click(function () {
            $(this).parent().parent().toggleClass("unfold")
            $(this).parent().parent().find("ul:first").slideToggle(500);
            $(this).toggleClass("unfold");
            $(this).parent().children(".filename").toggleClass("filename-open");
        });
    });
    $(function () {
        $(".checkbox").click(function () {
            $(this).toggleClass("c-selected");
        });
    });
</script>
<!-- PAGE CONTENT BEGINS -->
<!-- #section:plugins/fuelux.treeview -->
<div class="row">
    <div class="col-sm-3">
      
    </div>

    <div class="col-sm-9">
        <div class="widget-box widget-color-blue2">
            <div class="widget-header">
                <h4 class="widget-title lighter smaller">Choose Categories</h4>
            </div>

            <div class="widget-body">
                <div class="widget-main padding-8">
                    <ul id="tree1"></ul>
                </div>
            </div>
        </div>
    </div>


</div>

